<template>
  <div class="nft-intro-and-box">
    <div class="nft-intro">
      <div class="nft-intro-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, labore,
        dicta aperiam quae porro suscipit praesentium assumenda neque eius unde
        hic saepe nihil! Veritatis, repellendus. Alias saepe culpa aliquid
        earum. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo
        repellendus, magni voluptatibus soluta, maxime
      </div>
    </div>

    <div class="nft-box-and-page-turner">
      <div class="nft-box">
        <div v-if="arr.length == 0" class="no-nfts">
          <div>You haven't got any MD Nft yet.</div>
        </div>
        <div v-else>
          <ul class="nft-list">
            <li
              v-for="(item, index) in arr.slice(nftsInPageStart, nftsInPageEnd)"
              :key="index"
            >
              <div
                class="nftbox1"
                @click="
                  visible = true;
                  nftIndex = item.certificateId;
                  liquidityOfCertificate = item.liquidity / 10 ** 18;
                  rewardOfCertificate = getReward(index);
                  poolNameOfCertificate = item.poolName;
                  poolAddressOfCertificate = item.protocol;
                  policyIndex = index;
                  handleNftsCertificateInit(item);
                "
              >
                {{ item.certificateId }}
              </div>
            </li>
            <li v-show="insertBlock">
              <div class="nftbox1 nftbox-hide"></div>
            </li>
          </ul>
        </div>

        <HandleNftsCertificateModal
          ref="handleNftsCertificate"
          :visible="visible"
          :content="content"
          :nftIndex="nftIndex"
          :liquidity="liquidityOfCertificate"
          :poolName="poolNameOfCertificate"
          :poolAddress="poolAddressOfCertificate"
          :reward="reward"
          :policyIndex="policyIndex"
          @close="visible = false"
        >
        </HandleNftsCertificateModal>
      </div>
      <div class="page-turner page-turner-gov">
        <Pagination
          v-model:current="current"
          :total="arr.length"
          :pageSize="pageSize"
          @change="onPaginationChange"
          :showSizeChanger="false"
        >
          <template #itemRender="{ type, originalElement }">
            <div class="pagination-container" v-if="type === 'prev'">
              <div class="pagination-text">
                {{ pageSize * (current - 1) + 1 }} - {{ pageSize * current }} of
                {{ arr.length }} items
              </div>
              <img @click="pageDown()" src="@/assets/left-icon.svg" alt="" />
            </div>
            <div class="pagination-container" v-else-if="type === 'next'">
              <img @click="pageUp()" src="@/assets/right-icon.svg" alt="" />
            </div>
            <component :is="originalElement" v-else></component>
          </template>
        </Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Pagination } from "ant-design-vue";
import store from "@/vuex/store";
import HandleNftsCertificateModal from "../HandleNfts/HandleNftsCertificateModal.vue";

export default {
  name: "certificateNfts",
  components: {
    HandleNftsCertificateModal,
    Pagination,
  },
  data() {
    return {
      visible: false,
      content: "i am nft",
      nftIndex: 0,
      nftsInPageStart: 0,
      nftsInPageEnd: 9,
      current: 1,
      pageSize: 9,
      liquidityOfCertificate: 0,
      poolNameOfCertificate: "",
      poolAddressOfCertificate: "",
      poolAddress: "",
      rewardOfCertificate: "0",
      policyIndex: "",
    };
  },
  methods: {
    onPaginationChange(current, size) {
      this.current = current;
      this.pageSize = size;
      this.nftsInPageStart = (current - 1) * size;
      this.nftsInPageEnd = current * size;
    },
    pageUp() {
      if (this.nftsInPageStart + 9 >= this.arr.length) {
        return;
      } else {
        this.nftsInPageStart += 9;
        this.nftsInPageEnd += 9;
      }
    },
    pageDown() {
      if (this.nftsInPageEnd - 9 <= 0) {
        return;
      } else {
        this.nftsInPageStart -= 9;
        this.nftsInPageEnd -= 9;
      }
    },
    getCertificatePoolName(poolAddress) {
      return store.state.web3Data.poolAddressArr[poolAddress]?.Protected;
    },
    async getReward(index) {
      let certificateId =
        store.state.web3Data.certificateArr[index].certificateId;
      let poolAddress = store.state.web3Data.certificateArr[index].protocol;
      await store.dispatch("getRewards", { certificateId, poolAddress });
    },
    handleNftsCertificateInit(item) {
      store.dispatch("getWithdrawableAmount", {
        certificateId: item.certificateId,
      });
      this.$refs.handleNftsCertificate.backToDetails();
    },
  },
  computed: {
    insertBlock() {
      if (this.nftsInPageStart + 9 <= this.arr.length) {
        return false;
      } else {
        let lastPageBlocks = this.nftsInPageEnd - this.arr.length;
        if (lastPageBlocks % 3 == 1) {
          return true;
        } else {
          return false;
        }
      }
    },
    arr() {
      let certificates = store.state.web3Data.certificateArr;
      let arrLength = certificates.length;
      for (var i = 0; i < arrLength; i++) {
        let poolAddress = certificates[i].protocol;
        certificates[i]["poolName"] =
          store.state.web3Data.poolAddressArr[poolAddress]?.Protected;
        certificates[i]["poolImage"] =
          store.state.storage.protocolImage[poolAddress];
      }
      return certificates;
    },
    reward() {
      let reward = store.state.web3Data.reward;
      return reward;
    },
  },
  mounted() {
    store.dispatch("getCertificateNfts");
  },
};
</script>

